<!--
 * @Author: lihaonan
 * @Date: 2024-06-18 10:10:01
 * @LastEditors: 毕晨曦 
 * @LastEditTime: 2024-12-08 09:31:09
 * @Description: 编辑信息
-->
<template>
  <view class="index">
    <view class="content">
      <u-form :model="model" ref="form1">
        <u-form-item
          label="头像"
          prop="contractInfo.avatar"
          borderBottom
          labelPosition="top"
          labelWidth="140"
        >
          <u-upload
            :fileList="fileList"
            name="1"
            :maxCount="1"
            width="76"
            height="76"
            @afterRead="afterReadPoint"
          >
            <u-avatar
              :src="IMG_URL + model.avatar"
              shape="circle"
              size="100"
            ></u-avatar>
          </u-upload>
        </u-form-item>
        <u-form-item
          label="名称"
          prop="userInfo.name"
          borderBottom
          ref="item1"
          labelWidth="120"
        >
          <u-input v-model="model.nickName" border="none"></u-input>
        </u-form-item>
        <u-form-item
          label="性别"
          prop="userInfo.sex"
          borderBottom
          ref="item1"
          labelWidth="120"
          @click="sexShow = true"
        >
          <u-input
            v-model="model.sex"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择性别"
            border="none"
          ></u-input>
          <template #right>
            <u-icon name="arrow-right"></u-icon>
          </template>
        </u-form-item>
        <u-form-item
          label="生日"
          prop="userInfo.name"
          borderBottom
          ref="item1"
          labelWidth="120"
          @click="ageShow = true"
        >
          <u-input
            v-model="model.birthday"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择出生日期"
            border="none"
          ></u-input>
          <template #right>
            <u-icon name="arrow-right"></u-icon>
          </template>
        </u-form-item>
        <u-form-item
          label="电话"
          prop="userInfo.phone"
          borderBottom
          ref="item1"
          labelWidth="120"
        >
          <u-input v-model="model.phone" border="none"></u-input>
        </u-form-item>
        <u-form-item
          label="身高"
          prop="userInfo.phone"
          borderBottom
          ref="item1"
          labelWidth="120"
        >
          <u-input
            placeholder="请输入身高"
            v-model="model.height"
            border="none"
            type="number"
          ></u-input>
          <template #right>
            <view class="text-grey">cm</view>
          </template>
        </u-form-item>
        <u-form-item
          label="体重"
          prop="userInfo.weight"
          borderBottom
          ref="item1"
          labelWidth="120"
        >
          <u-input
            placeholder="请输入体重"
            v-model="model.weight"
            border="none"
            type="number"
          ></u-input>
          <template #right>
            <view class="text-grey">kg</view>
          </template>
        </u-form-item>
        <u-form-item
          label="邮箱"
          prop="userInfo.email"
          borderBottom
          ref="item1"
          labelWidth="120"
        >
          <u-input
            placeholder="请输入邮箱"
            v-model="model.email"
            border="none"
            type="text"
          ></u-input>
        </u-form-item>
        <u-form-item label="地址" borderBottom labelWidth="120">
          <picker
            mode="region"
            :value="provinceValue"
            class="u-w-440"
            @change="bindTimeChange"
          >
            <view class="text">
              {{ provinceName || "请选择城市" }}
            </view>
          </picker>
        </u-form-item>
        <u-form-item
          label="学历"
          prop="userInfo.education"
          borderBottom
          ref="item1"
          labelWidth="120"
          @click="educationShow = true"
        >
          <u-input
            v-model="model.education"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择学历"
            border="none"
          ></u-input>
          <template #right>
            <u-icon name="arrow-right"></u-icon>
          </template>
        </u-form-item>
        <u-form-item
          label="手臂类型"
          borderBottom
          labelWidth="160"
          @click="showHeadPopup = true"
        >
          <view>{{ model.head }}</view>
          <template #right>
            <u-icon name="arrow-right"></u-icon>
          </template>
        </u-form-item>
        <u-form-item
          label="血型"
          borderBottom
          labelWidth="120"
          @click="showBlood = true"
        >
          <u-picker
            :show="showBlood"
            :columns="columnsBlood"
            @confirm="changeBlood"
            @cancel="showBlood = false"
          ></u-picker>
          {{ model.blood }}
          <template #right>
            <u-icon name="arrow-right"></u-icon>
          </template>
        </u-form-item>
        <u-form-item
          label="个人介绍"
          prop="userInfo.introduce"
          borderBottom
          ref="item1"
          labelWidth="150"
        >
          <u-textarea
            v-model="model.introduce"
            placeholder="请输入个人介绍"
            maxlength="200"
            count
          ></u-textarea>
        </u-form-item>
        <u-form-item
          label="需求"
          prop="userInfo.need"
          borderBottom
          ref="item1"
          labelWidth="150"
        >
          <u-textarea
            v-model="model.need"
            placeholder="请输入个人需求"
            maxlength="200"
            count
          ></u-textarea>
        </u-form-item>
      </u-form>
      <view
        class="flex pt-20"
        style="gap: 6rpx; flex-wrap: wrap; align-items: flex-end"
      >
        <u-tag
          v-for="i in hobbyList"
          :text="i.val"
          type="success"
          size="large"
          closable
          @close="deleteHobby(i.id)"
        ></u-tag>
        <view style="width: 220rpx">
          <u-button
            text="新增兴趣爱好"
            color="linear-gradient(to right, #81d8d0, #FD6585)"
            size="small"
            @click="showHobby = true"
          ></u-button>
        </view>
      </view>

      <view class="button pt-45">
        <view class="to-btn" @click="submit">提交</view>
      </view>
    </view>
  </view>
  <u-action-sheet
    :show="sexShow"
    :actions="sexArr"
    title="请选择性别"
    @close="sexShow = false"
    @select="sexChange"
  ></u-action-sheet>
  <u-action-sheet
    :show="educationShow"
    :actions="educationList"
    title="请选择您的学历"
    @close="educationShow = false"
    @select="educationChange"
  ></u-action-sheet>
  <u-datetime-picker
    ref="datetimePickerRef"
    hasInput
    :show="ageShow"
    v-model="dateTime"
    mode="date"
    @close="ageShow = false"
    @cancel="ageShow = false"
    @confirm="ageChange"
    :minDate="new Date(1975, 0, 1).getTime()"
    :maxDate="new Date(2020, 0, 1).getTime()"
  ></u-datetime-picker>
  <u-popup :show="showHobby" @close="showHobby = false">
    <view style="height: 380rpx; padding-top: 60rpx" class="px-40">
      <u-input
        placeholder="请输入兴趣爱好"
        border="surround"
        clearable
        v-model="hobbyVal"
      ></u-input>
      <view style="padding-top: 40rpx">
        <u-button text="确定" color="#81d8d0" @click="saveHobby"></u-button>
      </view>
    </view>
  </u-popup>

  <HeadPopup
    :show="showHeadPopup"
    @close="showHeadPopup = false"
    @setHead="setHead"
  />
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { addMatchmaker, uploadFilePromise } from "@/api/IdentityApplication";
import { updateNumber } from "@/api/appNumber";
import { useUserStore } from "@/store/user";
import { onLoad } from "@dcloudio/uni-app";
import dayjs from "dayjs";
import HeadPopup from "@/components/head-popup/index.vue";
const IMG_URL = import.meta.env.VITE_BASE_URL_IMG;

const userUserStore = useUserStore();
const userInfo = uni.getStorageSync("userInfo");
const model = ref({
  nickName: "",
  phone: "",
  avatar: "",
  birthday: "",
  sex: "",
  height: "",
  weight: "",
  email: "",
  education: "",
  introduce: "",
  need: "",
  interest: "",
  appNumberId: userInfo.mid,
  province: "",
  city: "",
  district: " ",
  head: "X",
  blood: "X",
});
const provinceValue = ref("");
const provinceName = ref("");

function bindTimeChange(e: any) {
  model.value.province = e.detail.value[0];
  model.value.city = e.detail.value[1];
  model.value.district = e.detail.value[2];
  provinceName.value =
    e.detail.value[0] + e.detail.value[1] + e.detail.value[2];
}
const showHeadPopup = ref(false);
// 选择性别
const sexShow = ref(false);
const sexArr = reactive([
  {
    id: "0",
    name: "男",
  },
  {
    id: "1",
    name: "女",
  },
]);

const sexChange = (val: { name: string }) => {
  model.value.sex = val.name;
};

const setHead = (val: string) => {
  model.value.head = val;
  showHeadPopup.value = false;
};

const columnsBlood = reactive([["A", "B", "O", "AB"]]);

const showBlood = ref(false);
const changeBlood = ({ value }) => {
  model.value.blood = value[0];
  showBlood.value = false;
};

const educationShow = ref(false);
const educationList = [
  {
    id: "1",
    name: "初中",
  },
  {
    id: "2",
    name: "高中",
  },
  {
    id: "3",
    name: "大专",
  },
  {
    id: "4",
    name: "本科",
  },
  {
    id: "5",
    name: "硕士",
  },
  {
    id: "6",
    name: "博士",
  },
];

const hobbyList = ref<{ id: number; val: string }[]>([]);
const showHobby = ref(false);
const hobbyVal = ref("");

function saveHobby() {
  hobbyList.value.push({
    id: hobbyList.value.length + 1,
    val: hobbyVal.value,
  });
  showHobby.value = false;
  hobbyVal.value = "";
}

function deleteHobby(id: number) {
  hobbyList.value = hobbyList.value.filter((i) => i.id !== id);
}

const educationChange = (val: { name: string }) => {
  model.value.education = val.name;
  educationShow.value = false;
};

// 选择年龄
const ageShow = ref(false);
const ageArr = reactive([{}]);
for (let index = 18; index < 100; index++) {
  ageArr.push({ name: index });
}
const ageChange = (val: any) => {
  const date = new Date(val.value);
  dateTime.value = val.value;
  model.value.birthday = dayjs(date).format("YYYY-MM-DD");
  ageShow.value = false;
};

// 图片列表
const fileList = ref([]);
const dateTime = ref<number>();
onLoad((option) => {
  if (!option) return;
  const jsonData = JSON.parse(decodeURIComponent(option.data));
  model.value = jsonData;
  dateTime.value = jsonData.birthday;
  if (jsonData.province && jsonData.city) {
    provinceName.value = jsonData.province + jsonData.city;
  }
  if (jsonData.interest && jsonData.interest.length)
    hobbyList.value = jsonData.interest
      .split(",")
      .filter((i: string) => i)
      .map((i: string, index: number) => {
        return {
          id: index,
          val: i,
        };
      });
});
// 收集点照片上传
const afterReadPoint = async (res: any) => {
  let a = uni.uploadFile({
    url: import.meta.env.VITE_BASE_URL + "/common/upload",
    filePath: res.file.url,
    name: "file",
    header: {
      Authorization: uni.getStorageSync("token"),
    },
    formData: {
      file: "file",
    },
    success: (res) => {
      setTimeout(() => {
        let dataing = JSON.parse(res.data);
        model.value.avatar = dataing.fileName;
      }, 1000);
    },
  });
};

// 提交申请
const submit = async () => {
  const hobby = hobbyList.value.reduce(
    (acc: string, cur: { id: number; val: string }) => {
      return acc + cur.val + ",";
    },
    ""
  );

  uni.showLoading({ title: "提交中" });
  const { code } = await updateNumber({
    ...model.value,
    interest: hobby || model.value.interest,
  });
  if (code !== 200) return;
  await userUserStore.useLoginUser();
  uni.hideLoading();
  uni.switchTab({ url: "/Layout/geren" });
};
</script>
<style>
.u-action-sheet__item-wrap {
  overflow: auto;
  max-height: 50vh;
}
</style>
<style lang="scss" scoped>
.index {
  height: 100vh;
  overflow-x: hidden;
  background-color: rgb(245, 245, 245);

  .content {
    margin-top: 90rpx;
    // width: 90%;
    padding: 0 30rpx;
    height: 1780rpx;
    margin: 0 auto;
    background: #fff;
    box-shadow: 5px 5px 5px #cdcfcf;
  }

  .button {
    .to-btn {
      width: 536rpx;
      height: 84rpx;
      background: linear-gradient(86deg, #c2d2f9 0%, #c5c2f3 100%);
      border-radius: 42rpx 42rpx 42rpx 42rpx;
      text-align: center;
      line-height: 84rpx;
      margin: auto;
      margin-top: 43rpx;
      color: rgba(65, 92, 158, 0.9);
      font-weight: 400;
      font-family: "PingFang SC-Bold, PingFang SC";
      font-size: 28rpx;
    }
  }
}
</style>
